// _private/cpt/paging-scroll-view/index.js
const { $wx, img, $http, $config } = getApp()
const gotop = require('../../com/wx/gotop')
Component({
    options: {
        multipleSlots: true,     // 启用多 slot 支持
        virtualHost: true
    },
    properties: {
        className:String,
        style:String,
        background:{ type: String, value: $config.refresh.bgcolor },
        height: { type: String, value: '100%' },
        dotColor: { type: String, value: $config.refresh.dotColor },
        icon: String,
        text: String,
        height: { type: String, value: '100%'},
        initModel: Object,
        api: String,
        pagingClassName: { type: String, value: 'grid' },
        pagingStyle:String,
        gapX: { type:Number, value: 10 },
        gapY: { type:Number, value: 10 },
        id: { type: String, value: 'paging' },
        right:{ type:Number, value: 5 },
        bottom:{ type:Number, value: 5 },
        scrollTop: { type:Number, value: 0 },
    },
    data: {
        img,
        data: [],
        refresh: true,
    },
    /**
   * miniprogram-computed提供计算属性
   */
    computed: { },
    /**
     * 自带的监听器
     */
    observers: {  },
    /**
     * miniprogram-computed提供监听器
     */
    watch: {},
    /*组件生命周期*/
    lifetimes: {
        // 在组件实例刚刚被创建时执行
        created(){ },
        // 在组件实例进入页面节点树时执行
        attached(){ },
        // 在组件在视图层布局完成后执行
        ready(){
            this.initModel = this.data.initModel ?? {}
            this.paging()
        },
        // 在组件实例被移动到节点树另一个位置时执行
        moved(){ },
        // 在组件实例被从页面节点树移除时执行
        detached(){
            $http.abort(this)
        },
        // 每当组件方法抛出错误时执行
        error(){ }
    },
    /*组件所在页面的生命周期 */
    pageLifetimes: {
        // 页面被展示
        show(){ },
        // 页面被隐藏
        hide(){ },
        // 页面尺寸变化
        resize(size) { }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        // 接口请求
        async paging(o){ 
            return $http.paging(this, this.data.api, { cpt:true, ...o } ).then(({ data, pager, result })=>{
                this.triggerEvent('data',  { data: this.data.data, pager, result })
            })
         },
        // 搜索
        async search(param){ return await this.paging({ param }) },
        // 刷新
        async refresh(callback){ await this.paging({ refresh:true, onEnd:callback }) },
        // 重置
        async reset(){ return await this.paging({ reset:true }) },
        // 下拉刷新
        async onPullDownRefresh(){
            await this.refresh(()=>{
                this.setData({ refresh: false })
                $wx.msg.info('刷新成功')
            })
        },
        async onReachBottom(){
            await this.paging()
        },
        onScroll( { detail: { scrollTop } } ){
            this.createSelectorQuery().select('#scroll').boundingClientRect( ({ height }) => {
                this.selectComponent('#gotop').show( scrollTop > height )
            }).exec()
        },
        onTap(){
            this.setData({ scrollTop:0 })
        }
    }
})
